<template>
  <section>
  	<div class="model retrieval">
      <img :src="IMGBASE64.JIANSUOGUANLI2X" class="orange">
      <span class="title">检索管理</span>
      <div class="body">
      	<span>年级:</span>
        <select class="select" v-model="gradeSelect" @change="getClassData()" :style="{background: `url(${IMGBASE64.SELECT}) no-repeat scroll right center`}">
          <option v-for="(item, key) in gradeOption" :label="item" :value="key"></option>
        </select>
        <span>班级:</span>
        <select class="select" v-model="classSelect" :style="{background: `url(${IMGBASE64.SELECT}) no-repeat scroll right center`}">
          <option v-for="(item, key) in classOption" :label="item" :value="item"></option>
        </select>
	      <span>课程名称:</span>
	      <select class="select" v-model="courseSelect" :style="{background: `url(${IMGBASE64.SELECT}) no-repeat scroll right center`}">
	      	<option v-for="(item, key) in courseOption" :label="item.courseName" :value="key"></option>
	      </select>
        <div class="right">
          <el-col :span="12">
            <el-input type="text" placeholder="请输入学生姓名" v-model="studentName" size="small"></el-input>
          </el-col>
          <el-col :span="1"><div class="kong1"></div></el-col>
          <el-col :span="10">
            <el-button type="primary" size="small" @click="getTabelData">搜索</el-button>
            <el-button type="primary" size="small">导出</el-button>
          </el-col>
        </div>
        <div class="clear"></div>
	    </div>
    </div>

    <div class="model">
      <img :src="IMGBASE64.PINGFENLEIXIE2X" class="pink">
      <span class="title">课程管理</span>
      <div class="kong"></div>
      <el-table :data="tableData" style="width: 100%">
      	<el-table-column prop="grade" label="年级" align="center"></el-table-column>
      	<el-table-column prop="clazz" label="班级" align="center"></el-table-column>
      	<el-table-column prop="studentId" label="学号" align="center"></el-table-column>
      	<el-table-column prop="studentName" label="姓名" align="center"></el-table-column>
      	<el-table-column prop="sex" label="性别" align="center"></el-table-column>
      	<el-table-column prop="courseName" label="课程名称" align="center" :show-overflow-tooltip='true'></el-table-column>
      	<el-table-column prop="teacherName" label="上课老师" align="center" :show-overflow-tooltip='true'></el-table-column>
      	<el-table-column prop="place" label="上课地点" align="center" :show-overflow-tooltip='true'></el-table-column>
      	<el-table-column prop="otherPlace" label="雨天地点" align="center" :show-overflow-tooltip='true'></el-table-column>
      	<el-table-column label="操作" align="center">
      		<template scope="scope">
    					<el-button size="small" @click="diaobanshow">调班</el-button>
    				</template>
      	</el-table-column>
      </el-table>
      <el-pagination
        v-show="paging"
        @current-change="handleCurrentChange"
        :page-size="20"
        layout="prev, pager, next, jumper"
        :total="total"
        class="pull-right">
      </el-pagination>
    </div>

    <div class="details" v-show="diaobanShow">
      <img :src="IMGBASE64.XIANGQING2X" class="icon">
      <span class="title">详情修改</span>
      <el-button icon="el-icon-close" class="close" @click="diaobanshow()"></el-button>
      <div class="header">
        <span class="title">已报课程</span>
      </div>
      <div class="content">
        <el-form label-width="120px">
          <el-col :span="24">
            <el-form-item label="课程名称">
              <span>{{detailsForm.courseName}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="上课老师">
              <span>{{detailsForm.teacherName}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="上课时间">
              <span>{{detailsForm.courseTime}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="上课地点">
              <span>{{detailsForm.courseplace}}</span>
            </el-form-item>
          </el-col>
        </el-form>
        <div class="clear"></div>
      </div>

      <div class="header">
        <span class="title">申调课程</span>
      </div>
      <div class="content">
        <el-form label-width="120px">
          <el-col :span="24">
            <el-form-item label="课程名称">
              <el-select v-model="xiugaiForm.courseName" size="small">
                <!-- <el-option></el-option> -->
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="上课老师">
              <el-select v-model="xiugaiForm.teacherName" size="small"></el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="上课时间">
              <el-date-picker
                v-model="xiugaiForm.courseTime"
                type="date"
                size="small"
                placeholder="选择日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="上课地点">
              <input type="text" class="inputText" v-model="xiugaiForm.courseplace">
            </el-form-item>
          </el-col>
        </el-form>
        <div class="clear"></div>
      </div>

    </div>

    <transition name="modal-shadow">
      <div class="modal-backdrop" v-show="diaobanShow"></div>
    </transition>
  </section>
</template>

<script>
export default {
  data () {
    return {
      diaobanShow: false,
      gradeSelect: null,
      gradeOption: [],
      classSelect: null,
      classOption: [],
      courseSelect: null,
      courseOption: [],
      studentName: null,
      tableData: [],
      total: 0,
      page: 1,
      paging: true,
      detailsForm: {
        courseName: null,
        teacherName: null,
        courseTime: null,
        courseplace: null
      },
      xiugaiForm: {
        courseName: null,
        teacherName: null,
        courseTime: null,
        courseplace: null
      }
    }
  },
  mounted () {
    this.getGradeData()
    this.getTabelData()
    this.getCourseData()
  },
  methods: {
    handleCurrentChange (val) {
      this.page = val
      this.getTabelData()
    },
    getTabelData () {
      // let _cookie = document.cookie.split(';')
      // let _cookieArray = []
      // _cookie.forEach(v => {
      //   let _d = v.split('=')
      //   _cookieArray.push({
      //     key: _d[0],
      //     value: _d[1]
      //   })
      // })
      this.$http.post(this._httpUrl + 'interest/course/selectedCourse/query', {page: (this.page), size: 20, courseName: this.courseSelect, grade: this.gradeSelect, clazz: this.classSelect, studentName: this.studentName}, {'headers': {'yxt-xtoken': localStorage.xtoken}}).then(function (response) {
        if (response.body.code === '000') {
          this.tableData = response.data.data.content
          this.total = response.data.data.total
          for (var i = 0; i < this.tableData.length; i++) {
            this.tableData[i].value = i + 1
            for (var x in this.gradeOption) {
              if (this.tableData[i].grade === parseInt(x)) {
                this.tableData[i].grade = this.gradeOption[x]
              }
            }
          }
        } else if (response.body.code === '887') {
          this.$router.push('/')
        } else if (response.body.code === '889') {
          this.$router.push('/')
        }
      })
    },
    getGradeData () {
      // let _cookie = document.cookie.split(';')
      // let _cookieArray = []
      // _cookie.forEach(v => {
      //   let _d = v.split('=')
      //   _cookieArray.push({
      //     key: _d[0],
      //     value: _d[1]
      //   })
      // })
      this.$http.post(this._httpUrl + 'public/grade/query', {}, {'headers': {'yxt-xtoken': localStorage.xtoken}}).then(function (response) {
        if (response.body.code === '000') {
          this.gradeOption = response.data.data.gradeMap
        } else if (response.body.code === '887') {
          this.$router.push('/')
        } else if (response.body.code === '889') {
          this.$router.push('/')
        }
      })
    },
    getClassData () {
      // let _cookie = document.cookie.split(';')
      // let _cookieArray = []
      // _cookie.forEach(v => {
      //   let _d = v.split('=')
      //   _cookieArray.push({
      //     key: _d[0],
      //     value: _d[1]
      //   })
      // })
      this.$http.post(this._httpUrl + 'public/class/query?grade=' + this.gradeSelect, {}, {'headers': {'yxt-xtoken': localStorage.xtoken}}).then(function (response) {
        if (response.body.code === '000') {
          this.classOption = response.data.data
        } else if (response.body.code === '887') {
          this.$router.push('/')
        } else if (response.body.code === '889') {
          this.$router.push('/')
        }
      })
    },
    getCourseData () {
      // let _cookie = document.cookie.split(';')
      // let _cookieArray = []
      // _cookie.forEach(v => {
      //   let _d = v.split('=')
      //   _cookieArray.push({
      //     key: _d[0],
      //     value: _d[1]
      //   })
      // })
      this.$http.post(this._httpUrl + 'interest/course/courseManage/query', {}, {'headers': {'yxt-xtoken': localStorage.xtoken}}).then(function (response) {
        if (response.body.code === '000') {
          this.courseOption = response.data.data.content
        } else if (response.body.code === '887') {
          this.$router.push('/')
        } else if (response.body.code === '889') {
          this.$router.push('/')
        }
      })
    },
    clearGradeSelect () {
      this.gradeSelect = null
      this.classSelect = null
    },
    diaobanshow () {
      this.diaobanShow = !this.diaobanShow
    }
  }
}
</script>

<style lang="less" scoped>
@import '/static/css/all-use.css';
.kong1{
  padding: 1px;
}
.retrieval{
	.body{
		span{
	  	margin-left: 4%;
	  }
	  span:first-child{
	  	margin-left: 0;
	  }
		select{
			width: 13%;
			border: 0;
			border-bottom: 1px solid #D7D7D7;
		}
	}
  .right{
    float: right;
  }
  .clear{
    clear: both;
  }
}
input{
  border: 0;
  border-bottom: 1px solid #d7d7d7;
  margin-left: 4%;
  margin-right: 2%;
}

.details{
  width: 55%;
  position: fixed;
  left: 25%;
  top: 60px;
  background: #FFF;
  border-radius: 5px;
  z-index: 99999;
  padding: 20px 10px 10px 10px;
  .header{
    border-bottom: 2px solid #D7D7D7;
    padding: 30px 0 10px 0;
    margin-left: 3%;
    margin-bottom: 10px;
    .title{
      color: #FB7862;
      border-bottom: 2px solid #FB7862;
      padding: 0 0 10px 0;
      margin-left: 0;
    }
  }
  .clear{
    clear: both;
  }
}

</style>
